import React from 'react';
import { ModalForm, ProFormText } from '@ant-design/pro-form';
import type { AddConfigItem, MpConfigItem } from '../data';
import { getMpConfigById } from '../service';
import { Divider } from 'antd';

type CreateFormProps = {
  createModalVisible: boolean;
  handleModalVisible: any;
  corpId: string;
  configId: any;
  onSubmit: (values: AddConfigItem) => Promise<void>;
};

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const { createModalVisible, handleModalVisible, corpId, configId, onSubmit } = props;
  const [useDefault, setUseDefault] = React.useState<MpConfigItem>(Object);

  const [useContent, setUseContent] = React.useState<string[]>([]);
  const [useGuarantee, SetUseGuarantee] = React.useState<string[]>([]);

  return (
    <ModalForm
      title="配置样式"
      width="400px"
      visible={createModalVisible}
      onVisibleChange={handleModalVisible}
      onFinish={onSubmit}
      initialValues={{}}
      modalProps={{ destroyOnClose: true }}
      request={async (params, options) => {
        console.log('params', params, corpId, configId);
        const result = await getMpConfigById(corpId, configId, options);
        setUseDefault(result.data);

        const obj: string[] = [];
        result.data.content.split('#').forEach((element) => {
          obj.push(element);
        });
        setUseContent(obj);

        const obj2: string[] = [];
        result.data.guarantee.split('#').forEach((element) => {
          obj2.push(element);
        });
        SetUseGuarantee(obj2);

        return result;
      }}
    >
      <ProFormText name="config_id" label="配置ID" disabled initialValue={configId} width="md" />
      <ProFormText
        rules={[
          {
            required: true,
            message: '配置描述不能为空',
          },
        ]}
        width="md"
        name="title"
        label="配置描述"
        initialValue={useDefault.title}
      />
      <Divider>添加客服页面</Divider>
      <ProFormText
        rules={[
          {
            required: true,
            message: '主标题不能为空',
          },
        ]}
        width="md"
        name="main_title"
        label="主标题"
        initialValue={useContent[0]}
      />
      <ProFormText
        rules={[
          {
            required: true,
            message: '副标题不能为空',
          },
        ]}
        width="md"
        name="sub_title"
        label="副标题"
        initialValue={useContent[1]}
      />
      <ProFormText
        rules={[
          {
            required: true,
            message: '尾部描述不能为空',
          },
        ]}
        width="md"
        name="footer"
        label="尾部描述"
        initialValue={useContent[2]}
      />
      <Divider>保障卡页面</Divider>
      <ProFormText
        rules={[
          {
            required: true,
            message: '主标题不能为空',
          },
        ]}
        width="md"
        name="g_main_title"
        label="主标题"
        initialValue={useGuarantee[0]}
      />
      <ProFormText
        rules={[
          {
            required: true,
            message: '副标题不能为空',
          },
        ]}
        width="md"
        name="g_sub_title"
        label="副标题"
        initialValue={useGuarantee[1]}
      />
      <ProFormText
        rules={[
          {
            required: true,
            message: '尾部描述不能为空',
          },
        ]}
        width="md"
        name="g_footer"
        label="尾部描述"
        initialValue={useGuarantee[2]}
      />
    </ModalForm>
  );
};

export default CreateForm;
